<template>
	<view>
		<uv-tabs :list="list" @click="click" lineColor="#111115" :scrollable="false"></uv-tabs>
		<view class="p-30" v-if="indexNum==0">
			<block v-for="(item,i) in lists" :key="i">
				<shopItem type="chuzu" :item="item"></shopItem>
			</block>	
		</view>
		
		<view class="anliList" v-else style="padding: 25rpx;">
			<view v-for="(item,index) in lists" :key="index" class="anliItem" @click="$util.redirectTo('/otherpages/shopDetali/shopDetali',{type:'anLi',id:item.shop_id})">
				<image :src="$util.img(imgReturn(item.images))" mode="aspectFill"></image>
				<view class="anliItemA p-16">
					<view class="font-28 font-weight">{{item.shop_name}}{{item.pay_type}}成功!</view>
				</view>
			</view>
		</view>
		
		<block v-if="!lists.length">
			<noneList></noneList>
		</block>
		<view class="bottom-mar"></view>
		<uv-load-more :status="loadStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[],
				indexNum:0,
				list: [{
						name: '商铺',
					},
					{
						name: '案例',
					}
				],
				loadShow: true,
				loadStatus: 'loadmore',
				pageNum:1
			};
		},
		onShow() {
			this.lists = []
			this.loadShow = true,
			this.loadStatus = 'loadmore',
			this.pageNum = 1 
			this.getShouC()
		},
		onReachBottom() {
			// 触底加载
			this.getShouC()
		},
		methods:{
			imgReturn(img) {
				if (img) {
					return img.split(',')[0]
				} else {
					return ''
				}
			},
			getShouC() {
				if (this.loadShow) {
					this.loadStatus = 'loading'
					this.loadShow = false
					this.$api.sendRequest({
						url: '/api/collection/lists',
						data: {
							page:this.pageNum,
							num:10,
							is_deal:this.indexNum
						},
						success: res => {
							let objs = res.data.data
							objs.forEach((item,i)=>{
								objs[i].id = item.shop_id
							})
							this.lists.push(...objs)
							if (res.data.data.length < 10) {
								this.loadShow = false
								this.loadStatus = 'nomore'
								return
							}
							this.pageNum++
							this.loadShow = true
							this.$forceUpdate()
						}
					})
				}
				
				
				// this.$api.sendRequest({
				// 	url:'/api/collection/lists',
				// 	data:{
				// 		page:this.pageNum,
				// 		num:10,
				// 		is_deal:this.indexNum
				// 	},success:res=>{
				// 		let objs = res.data.data
				// 		objs.forEach((item,i)=>{
				// 			objs[i].id = item.shop_id
				// 		})
						
				// 		this.lists = objs
				// 	}
				// })
			},
			click(e) {
				this.loadShow = true,
				this.loadStatus = 'loadmore',
				this.pageNum = 1 
				this.lists = []
				this.indexNum = e.index
				this.getShouC()
			}
		}
	}
</script>

<style lang="scss">
	.anliItem {
		width: 334rpx;
		height: 316rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx  rgba(0, 19, 41, 0.08);
		margin-bottom: 20rpx;
		image {
			width: 334rpx;
			height: 176rpx;
		}
	}
	.anliList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>
